<template>
  <div class="input-tags--container">
    <h1>布局1</h1>
    <InputTags v-model="tags">
      <div class="input-tags-wrap" slot-scope="{tags, inputEvents, inputAttrs, removeTag}">
        <span class="tag" v-for="(tag, index) in tags" :key="index">
          <span>{{ tag }}</span>
          <button @click="removeTag(tag)"></button>
        </span>
      </div>
    </InputTags>

    <h2>布局2</h2>
    <input-tags v-model="tags">
      <div
        slot-scope="{tags, inputEvents, inputAttrs, removeTag, addTag}"
        class="input-tags-wrap--tow"
      >
        <div class="tag_list--container">
          <div class="tag_input--wrap">
            <input
              type="text"
              class="tag_input--two"
              placeholder="Add tag..."
              v-on="inputEvents"
              v-bind="inputAttrs"
            />
            <button type="button" class="tag_input--button" @click="addTag">添加</button>
          </div>

          <div v-for="(tag,index) in tags" :key="index" class="tag--wrap">
            <span>{{index+1}}： {{tag}}</span>
            <button class="" @click="removeTag(tag)">删除</button>
          </div>
        </div>
      </div>
    </input-tags>
  </div>
</template>

<script>
import InputTags from '@/fun-components/input-tags/index.vue'

export default {
  data () {
    return {
      tags: []
    }
  },
  components: {
    InputTags
  },
  methods: {
    input (e) {
      console.log('e', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.input-tags--container {
    width: 600px;
    margin: 0 auto;
    border: 1px solid gold;
    h1 {
        text-align: center;
        font-size: 20px;
    }
    .input-tags-wrap {
        width: 400px;
        min-height: 40px;
        border: 1px solid #ddd;
        margin: 20px auto;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .tag {
            height: 25px;
            border: 1px solid #ddd;
            text-align: center;
            padding: 0 10px;
            margin: 10px 0;
            margin-left: 5px;
            display: flex;
            align-items: center;
            button {
                border-radius: 0;
                border: 0;
                font-size: 16px;
                padding: 0;
                display: inline-block;
                margin-left: 10px;
                margin-left: 5px;
            }
        }
        .add_button {
            background: blueviolet;
            color: #fff;
        }
    }
    .input-tags-wrap--two {
        display: block;
        margin: 10px;
        .tag_list--container {
            width: 400px;
            margin: 0 auto;
            border: 1px solid #ddd;
        }
        .tag_input--wrap {
            margin-top: 5px;
            text-align: center;
        }
        .tag--wrap {
            margin: 10px 5px;
            text-align: center;
            button {
                border: 0;
                text-decoration: underline;
            }
        }
    }
    .tag_input {
        border: 0;
        padding: 5px 0;
        margin-left: 5px;
        outline: none;
    }
    .tag_input--two,
    .tag_input--button {
        margin-left: 5px;
        padding: 5px 0;
    }
    .tag_input--button {
        padding: 6px 10px;
        background: blueviolet;
        border: 0;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
}
</style>
